<script>

import LayoutComponent from '@/components/LayoutComponent.vue'
import BlogListComponent from '@/components/BlogListComponent.vue'

export default {
  name: 'TagView',
  components: { BlogListComponent, LayoutComponent },
  data () {
    return {
      tagList: [],
      tagIndex: '',
      blogList: [],
      tagId: ''
    }
  },
  methods: {
    getTagList () {
      this.$axios.get('api/tag/list').then(data => {
        this.tagList = [...data]
      }).catch(e => e)
    },
    selectTag (index) {
      this.tagIndex = index
      this.getTagId()
    },
    getTagId () {
      this.tagId = this.tagIndex !== '' ? this.tagList[this.tagIndex].tagId : ''
    }
  },
  created () {
    this.$nextTick(() => {
      this.getTagList()
    })
  }
}
</script>

<template>
  <layout-component :active-index="2">
    <div>
      <el-tag :type="tagIndex === '' ?'dark':''" @click="selectTag('')">全部</el-tag>
      <el-tag  v-for="(tag,index) in tagList" @click="selectTag(index)" :type="tagIndex === index ? 'dark' :''" :key="tag.tagId">{{tag.name}}</el-tag>
      <blog-list-component :type="3" :tag-id="tagId"/>
    </div>
  </layout-component>
</template>

<style scoped lang="scss">

</style>
